<template>
  <div class="text_list_box">
    <el-table ref="tableRef" :data="tableData" height="400" max-height="550" tooltip-effect="light" class="table_box" header-row-class-name="table_header_title">
      <el-table-column width="50" align="center">
        <template #default="scope">
          <el-checkbox v-model="scope.row.isCheck" @change="chooseMaterial(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="文件信息" width="400" align="left">
        <template #default="scope">
          <div class="file_box">
            <img class="suffix_icon" :src="getSuffixIcon(scope.row?.mediaFileInfo?.absolute_url)" alt="" />
            <span>{{ scope.row?.mediaFileInfo?.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="大小" align="center">
        <template #default="scope">
          <div class="radar_box">
            <span>{{ (scope.row?.mediaFileInfo?.size / 1024).toFixed(2) }} Kb</span>
            <img class="radar_icon" v-if="scope.row?.is_radar==1" src="@/assets/image/material/radar_red.png" alt="">
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch, computed, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getSuffixIcon } from '@/utils/utils'
  // const props = defineProps(['baseList', 'remainNum', 'selectBaseList'])

  interface PropsType {
    baseList?: any[],
    selectBaseList?: any[],
    remainNum?: (string | number),
    multiple?: boolean,
    totalNum: number
  }
  const props = withDefaults(defineProps<PropsType>(), {
    baseList: ()=>[],
    selectBaseList: ()=>[],
    remainNum: 0,
    multiple: true,
    totalNum: 9
  })

  const emit = defineEmits(['getData'])

  const tableData = computed(() => {
    let arr: any[] = []
    props.baseList.forEach((item: any) => {
      // item.isCheck = false
      arr.push(item)
    })
    return arr
  })
  const chooseMaterial = (item: any) => {
    let indx = props.selectBaseList.findIndex((it: any) => it.id === item.id)
    if(indx === -1){
      if (props.remainNum <= 0) {
        item.isCheck = false
        ElMessage.error(`最多可选${props.totalNum}个素材`);
        return
      }
    }
    let deleteItem = null
    if(props.multiple){
      if (indx === -1) {
        item.isCheck = true
        props.selectBaseList.push(item)
      } else {
        deleteItem = item
        props.selectBaseList.splice(indx, 1)
        item.isCheck = false
      }
    }else{
      if (indx === -1) {
        props.baseList.forEach(ite=>{
          ite.isCheck = false
        })
        item.isCheck = true
        props.selectBaseList.splice(0)
        props.selectBaseList.push(item)
      } else {
        item.isCheck = false
        props.selectBaseList.splice(0)
      }
    }
    emit('getData', {
      deleteItem,
      id: '5',
      type: 5,
      typeStr: 'file',
      data: props.selectBaseList
    })
  }

// watch(()=>props.selectBaseList, (val)=>{
//   if(val.length){
//     emit('getData', {
//       deleteItem: null,
//       id: '5',
//       type: 5,
//       typeStr: 'file',
//       data: props.selectBaseList
//     })
//   }
// }, {immediate: true, deep: true})

onMounted(()=>{
  if(props.selectBaseList.length){
    emit('getData', {
      deleteItem: null,
      id: '5',
      type: 5,
      typeStr: 'file',
      data: props.selectBaseList
    })
  }
})

</script>

<style lang="scss" scoped>
  .text_list_box {
    width: 100%;
    .file_box {
      display: flex;
      align-items: center;
      .suffix_icon {
        width: 40px;
        height: 40px;
        margin-right: 5px;
      }
    }
    .radar_box{
      display: flex;
      font-size: 14px;
      .radar_icon{
        margin-left: 10px;
        width: 20px;
        height: 20px;
      }
    }
    
  }
</style>
<style lang="scss">
  .text_list_box {
    .el-table--scrollable-y ::-webkit-scrollbar {
      displasy: none;
    }
    .table_header_title {
      th.el-table__cell {
        background: #f9f9f9;
        padding: 10px 0;
      }
    }
  }
</style>
